<!DOCTYPE html>
<html>
<head>
<title>pull to refresh</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/reset.css"/>
<link rel="stylesheet" href="../css/pullToRefresh.css"/>
<script src="../js/iscroll.js"></script>
<script src="../js/pullToRefresh.js"></script>
<style type="text/css" media="all">
body, html {
	padding: 0;
	margin: 0;
	height: 100%;
	font-family: Arial, Microsoft YaHei;
	color: #111;
    background-color: #ffffff;
}
.scroller li {
	height:60px;
	border-bottom: 1px solid #eee;
	background-color: #fff;
	font-size: 14px;
	
}
.wrapper :active{
  background-color: #DDDDDD;
}
.pullDownLabel img {
	width: 13px;
	height: 13px;
	margin-top: -1px;
	vertical-align: -2px;
	margin-right: 5px;
}

#wrapper ul li img {
  width: 60px;
  float: left;
  margin-left: 10px;
}

.game-info {
  text-align: left;
  float: left;
  margin-left: 10px;
  width: 210px;
  overflow: hidden;
  height: 60px;
}

.game-info h1 {
  font-size: 16px;
  margin-bottom: 8px;
}

.game-info p:nth-child(2) {
  font-size: 12px;
  color: #B6B6B6;
}

.game-info p:nth-child(3) {
  font-size: 12px;
  color: #9D9D9D;
}

#wrapper ul li button {
  position: absolute;
  right: 20px;
  margin-top: 10px;
  background-color: #F8CD0C;
  border: 0;
  color: #fff;
  font-family: Microsoft YaHei;
  padding: 5px 14px;
  border-radius: 3px;
}
  .wrapper{
    background-color: #CCE8CD;
  }
</style>
</head>
<body>
<!--must content ul li,or shoupi-->
<div id="wrapper" class="wrapper">
  <ul>
    <li>
      <img src="../img/game1.png">
      <div class="game-info">
        <h1>华仔天下</h1>
        <p>3万次下载 147.98M</p>
        <p>网易游戏出品,双维度操控，真人真机对战</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game2.png">
      <div class="game-info">
        <h1>有杀气的小华</h1>
        <p>4万次下载 97.98M</p>
        <p>网易游戏出品,3D即时战斗Q版手游</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game3.png">
      <div class="game-info">
        <h1>烈焰小华</h1>
        <p>5万次下载 67.18M</p>
        <p>再现经典即时战斗玄幻武侠手游</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game4.png">
      <div class="game-info">
        <h1>灵车飘逸吧</h1>
        <p>2万次下载 33.18M</p>
        <p>承载着3亿玩家期待的十年经典游戏</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game5.png">
      <div class="game-info">
        <h1>辉仔漏夜上东莞</h1>
        <p>2万次下载 53.43M</p>
        <p>超愉悦，与二次女友尺度大冒险</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game6.png">
      <div class="game-info">
        <h1>仙剑客栈20周年版</h1>
        <p>7万次下载 133.18M</p>
        <p>仙剑20周年王牌手游巨制一全新演绎大 </p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game7.png">
      <div class="game-info">
        <h1>展哥剑风传奇</h1>
        <p>5万次下载 89.18M</p>
        <p>漫画神作改编 首创三维一体玩法RPG巨作</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game7.png">
      <div class="game-info">
        <h1>展哥剑风传奇</h1>
        <p>5万次下载 89.18M</p>
        <p>漫画神作改编 首创三维一体玩法RPG巨作</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game7.png">
      <div class="game-info">
        <h1>展哥剑风传奇</h1>
        <p>5万次下载 89.18M</p>
        <p>漫画神作改编 首创三维一体玩法RPG巨作</p>
      </div>
      <button>下载</button>
    </li>
    <li>
      <img src="../img/game7.png">
      <div class="game-info">
        <h1>展哥剑风传奇</h1>
        <p>5万次下载 89.18M</p>
        <p>漫画神作改编 首创三维一体玩法RPG巨作</p>
      </div>
      <button>下载</button>
    </li>
  </ul>
</div>
<script>
    var webviewAndroidScript = window.injs;

    function initValue() {
        webviewAndroidScript.setOnDrawerBackEnabled("1");
    }

    refresher.init({
        id: "wrapper",
        pullDownAction: Refresh,
        pullUpAction: Load
    });
    function Refresh() {
        setTimeout(function () {	// <-- Simulate network congestion, remove setTimeout from production!
//            var el, li, i;
//            el = document.querySelector("#wrapper ul");
            //这里写你的刷新代码
            document.getElementById("wrapper").querySelector(".pullDownIcon").style.display = "none";
            document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "<img src='../css/ok.png'/>刷新成功";
            setTimeout(function () {
                wrapper.refresh();
                document.getElementById("wrapper").querySelector(".pullDownLabel").innerHTML = "";
            }, 1000);//模拟qq下拉刷新显示成功效果
            /****remember to refresh after  action completed！ ---yourId.refresh(); ----| ****/
        }, 1000);
    }
    function Load() {
        setTimeout(function () {// <-- Simulate network congestion, remove setTimeout from production!
            var el, li, i;
            el = document.querySelector("#wrapper ul");
            for (i = 0; i < 2; i++) {
                li = document.createElement('li');
                li.innerHTML = "<img src='../img/game8.png'><div class='game-info'><h1>华仔超神战记</h1><p>9万次下载     89.18M</p><p>秒杀虚拟摇杆，砸烂手机键盘</p></div><button>下载</button>"
                el.appendChild(li, el.childNodes[0]);
            }
            wrapper.refresh();
            /****remember to refresh after action completed！！！   ---id.refresh(); --- ****/
        }, 2000);
    }
</script>
</body>
</html>